<script setup>
import { reactive, ref } from 'vue';
import router from '@/router';
import adminApi from "@/api/adminApi.js";
import userApi from "@/api/userApi.js";
import loginApi from "@/api/loginApi.js";

const activeIndex = ref('1')

// 取出当前登录用户的信息
const currentItem = ref({});
getLoginItem();

// 菜单数据（默认为空，根据角色动态设置）
const menuData = ref([]);

// 用户下拉菜单的点击
function handleSelect(key, keyPath){
  if (key == 'logout'){
    // 用户退出
    logout();
  }
}
// 左侧菜单动作
function handleMenu(key){
  if (key){
    router.push(key);
  }
}
// 退出
function logout(){
  // 清除Token和用户类型
  localStorage.removeItem("token");
  localStorage.removeItem("userType");
  // 跳转到登录
  router.push('/login')
}

async function getLoginItem(){
  let token = localStorage.getItem("token");
  if(!token){
    router.push('/login')
    return;
  }
  try{
    const itemType = localStorage.getItem("userType");
    let result;
    if (itemType == 'admin'){
      result = await loginApi.loginAdminInfo();
      console.log("管理员信息：",result);
      setAdminMenu();
    }else{
      result = await loginApi.loginUserInfo();
      console.log("用户信息：",result)
      setUserMenu();
    }
    currentItem.value = result;
    console.log('当前用户信息:', currentItem.value)
  }catch (error) {
    console.error("获取用户信息失败:", error);
    localStorage.removeItem("token");
    localStorage.removeItem("userType");
    router.push('/login');
  }
}

function setAdminMenu(){
  menuData.value = [
    {name: '账号管理中心', icon: 'Notebook', children: [
        {name: '管理员账号管理', icon: 'UserFilled',path:"/index/AdminManagement"},
        {name: '用户账号管理', icon: 'User',path:"/index/UserManagement"},
      ]},
    {name: '地址管理中心', icon: 'Location', children: [
        {name: '地址管理', icon: 'MapLocation',path:"/index/AddressManagement"},
      ]},
    {name: '类型管理中心', icon: 'Files', children: [
        {name: '类型管理', icon: 'Document',path:"/index/TypeManagement"},
      ]},
    {name: '商品管理中心', icon: 'ShoppingBag', children: [
        {name: '商品管理', icon: 'Goods',path:"/index/GoodsManagement"},
        {name: '秒杀活动管理', icon: 'Timer',path:"/index/seckill-activity-management"},
        {name: '秒杀商品管理', icon: 'ShoppingCart',path:"/index/seckill-goods-management"},
      ]},
  ]
}

function setUserMenu(){
  menuData.value = []
}

// 左侧菜单展开折叠
const isCollapse = ref(false);
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 :ellipsis="false"
                 background-color="rgba(255,255,255,0.85)"
                 text-color="#2d6a4f"
                 active-text-color="#081c15"
                 @select="handleSelect">

          <el-menu-item index="0">
            <img style="height: 80%" src="@/assets/111.jpg" alt="易视界" />
            <span style="padding-left: 50px; font-size: 24px; color:#2d6a4f; font-weight: 500;">笨蛋总是流眼泪——秒杀商品管理系统</span>
          </el-menu-item>
          <div class="flex-grow" />
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Stamp></Stamp></el-icon>
              {{ currentItem.username || '没登录' }}
            </template>
            <el-menu-item index="1-1">修改信息</el-menu-item>
            <el-menu-item index="1-2">重置密码</el-menu-item>
            <el-menu-item index="logout">退出
              <el-icon><SwitchButton></SwitchButton></el-icon>
            </el-menu-item>
          </el-sub-menu>

        </el-menu>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <div style="height: 60px;line-height: 60px; text-align: right; color: #2d6a4f; font-size: 20px; margin-right: 24px;">
            <el-icon @click="isCollapse=!isCollapse">
              <Expand v-if="isCollapse"></Expand>
              <Fold v-else></Fold>
            </el-icon>
          </div>
          <el-menu active-text-color="#081c15"
                   background-color="rgba(161, 255, 206, 0.9)"
                   class="el-menu-vertical-demo"
                   default-active="/charts"
                   text-color="#081c15"
                   :collapse="isCollapse"
                   @select="handleMenu">
            <!-- 动态生成菜单 -->
            <el-sub-menu v-for="(menu, index) in menuData" :index="index.toString()">
              <template #title>
                <component
                    class="icons"
                    :is="menu.icon"
                    style="width: 1em; height: 1em; margin-right: 8px" >
                </component>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="(child, ind) in menu.children" :index="child.path">
                <el-icon><component
                    :is="child.icon">
                </component></el-icon>
                <span>{{ child.name }}</span>
              </el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<style>
.flex-grow {
  flex-grow: 1;
}

.common-layout,
.el-container {
  height: 100vh;
}

body {
  background: linear-gradient(to right, rgb(161, 255, 206), rgb(250, 255, 209));
  margin: 0;
  padding: 0;
}

.el-header {
  --el-header-padding: 0;
  --el-header-height: 80px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
}

.el-menu--horizontal {
  height: 80px;
}

.el-aside {
  background-color: rgba(161, 255, 206, 0.9);
  transition: width 0.3s ease;
}

.el-main{
  padding: 20px;
  min-height: calc(100vh - 140px);
}

.el-menu{
  border-width: 0px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.el-menu-item{
  font-size: 16px;
  transition: all 0.3s ease;
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: rgba(255,255,255,0.5) !important;
}

.el-menu-item.is-active {
  background-color: rgba(255,255,255,0.8) !important;
}

.el-menu-demo{
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.el-sub-menu__title{
  font-size: 16px;
  transition: all 0.3s ease;
}

/* 添加卡片效果给路由视图内容 */
.el-main > div {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  min-height: 100%;
}
</style>
